<template>
  <div v-if="data.length !== 0">
    <div class="tip" @click="expandChild">
      共 <i style="color: #3967ff">{{ data.length }}</i> 条评论，点击
      <span style="margin: 0 5px">{{
        isChildExpand ? " 收起 " : " 展开 "
      }}</span>
    </div>
    <template v-if="isChildExpand">
      <!-- 子集评论 -->
      <div v-for="(item, index) in data">
        <a-comment>
          <template #actions>
            <div class="day" style="margin-right: 30px">
              {{ getDateDiff(dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")) }}
            </div>
            <p
              key="comment-nested-reply-to"
              style="cursor: pointer"
              @click="changeReply(item, true)"
            >
              回复
            </p>
            <p
              v-if="item.isReply"
              style="margin-left: 15px; color: #da2717; cursor: pointer"
              @click="changeReply(item, false)"
            >
              取消回复
            </p>
          </template>
          <div v-if="item.isReply" class="reply-input">
            <a-textarea v-model:value="ChildreplyVal" style="width: 100%" />
            <div class="more">
              <div
                class="emoji"
                style="cursor: pointer"
                @click="showChildEmoji = !showChildEmoji"
              >
                <i class="iconfont icon-emoji" style="font-size: 20px"></i>
              </div>
              <a-button
                html-type="submit"
                type="primary"
                @click="reply(item.id)"
              >
                发布
              </a-button>
            </div>
            <div v-if="showChildEmoji">
              <EmojiPicker
                :native="true"
                style="margin: 10px 0"
                @select="onVue3EmojiPicker"
              />
            </div>
          </div>
          <template #author>
            <a>{{ item.username }}</a>
          </template>
          <template #avatar>
            <a-avatar :src="proxy.baeUrl + item.avatar" alt="Han Solo" />
          </template>
          <template #content>
            <p style="color: #333333">
              {{ item.content }}
            </p>
          </template>
        </a-comment>
      </div>
    </template>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { getDateDiff } from "@/utils/tool.js";
import dayjs from "dayjs";
import EmojiPicker from "vue3-emoji-picker";
const { proxy } = getCurrentInstance();
let ChildreplyVal = ref("");
let isChildExpand = ref(false);
let showChildEmoji = ref(false);
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  parentComment: {
    type: Number,
    default: 0,
  },
  TreeId: {
    type: Number,
    default: 0,
  },
});

// 是否展开回复
const changeReply = (item, type) => {
  item.isReply = type;
};

// 展开子集评论
const expandChild = () => {
  isChildExpand.value = !isChildExpand.value;
};
// 回复
const reply = () => {
  console.log(props.TreeId);
  console.log(props.parentComment);
  console.log(ChildreplyVal.value);
};
const onVue3EmojiPicker = (emoji) => {
  ChildreplyVal.value += emoji.i;
};
</script>

<style lang="scss" scoped>
.reply {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  cursor: pointer;
}

.more {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}

.tip {
  color: #a8abb2;
  font-size: 14px;
  cursor: pointer;
}
</style>